import React from 'react'
import * as echarts from 'echarts';

import Title from './Component/Title'
import Flushed from '../Operate_monitor/Component/Flushed'
import User_Profile from './Component/User_Profile'
import Trend from './Component/Trend'
import Tabular from './Component/Tabular'
export default function User_analytics() {
  const data = [
    {
      _id: new Date('2022-01-01'),
      name: '新增用户',
      num: 12,
      trend: '↑ 23.12%'
    },
    {
      _id: new Date('2022-01-02'),
      name: '活跃用户',
      num: 4,
      trend: '↑0%'
    },
    {
      _id: new Date('2022-01-03'),
      name: 'DAU/MAU',
      num: 0.7,
      trend: '↑ 0%'
    },
    {
      _id: new Date('2022-01-04'),
      name: '启动次数',
      num: 76,
      trend: '↑ 4%'
    },
    {
      _id: new Date('2022-01-05'),
      name: '平均使用时长',
      num: '01:24:34 ',
      trend: '↑ 0%'
    },
  ]

  const trend = ['新增用户', '日活跃', '周活跃', '月活跃', '启动次数', '单次平均使用时长']
  const main ='main'
  const box = () => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00','08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [0,1,2,1,4,2,6,2,1,2,1,2,1,2,1,9,2,1,2,1,2,1,2,1,0],
          type: 'line',
          areaStyle: {}
        }
      ]
    };

    option && myChart.setOption(option);
  }
  return (
    <div>
      <Title title={'用户分析'}></Title>
      <Flushed></Flushed>
      <User_Profile name='用户概况' data={data}></User_Profile>
      <Trend name='用户趋势' trend={trend} box={box} main={main}></Trend>
      <Tabular name='用户趋势'></Tabular>
    </div>
  )
}
